<template>
  <!-- navbar-->
  <nav
    class="relative w-full p-6 bg-gradient-to-tr from-primary-600 to-primary-100"
  >
    <div class="flex justify-between items-center">
      <!-- logo -->
      <div class="ml-6">
        <img src="@/assets/vite.svg" alt="logo" />
      </div>

      <!-- menu -->
      <div class="hidden md:flex space-x-6 text-white">
        <a href="#"><router-link to="/">Home</router-link></a>
        <a href="#"><router-link to="/about">About</router-link></a>
        <a href="#"><router-link to="/Product">Product</router-link></a>
        <a href="#"><router-link to="/Community">Community</router-link></a>
      </div>

      <!-- start button -->
      <a
        href="#"
        class="bg-primary-500 px-4 py-2 mr-6 rounded-lg text-white text-sm font-medium hover:bg-primary-400"
      >
        Get Started
      </a>
    </div>
  </nav>
</template>

<script setup lang="ts"></script>

<style scoped></style>
